import { TUIGlobal } from '../../../../TUICallService/index'
const HangupSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/hangup.svg'
const AcceptSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/accept.svg'
const FullScreenSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/desktop/fullScreen.svg'
const MinimizeDeskSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/desktop/minimize.svg'
const InviteUserDeskSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/desktop/inviteUser.svg'
const MinimizeMobileSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/mobile/minimize.svg'
const SwitchCameraSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/mobile/switch-camera.svg'
const CameraOpenSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/camera-open.svg'
const CameraCloseSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/camera-close.svg'
const MicrophoneOpenSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/microphone-open.svg'
const MicrophoneCloseSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/microphone-close.svg'
const SpeakerOpenSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/speaker-open.svg'
const SpeakerCloseSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/speaker-close.svg'
const InviteUserMobileSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/mobile/inviteUser.svg'
const DownSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/mobile/down.svg'

const isMobile = !TUIGlobal.isPC

let minimizeSrc = MinimizeMobileSrc
let inviteUser = InviteUserMobileSrc
if (!isMobile) {
    minimizeSrc = MinimizeDeskSrc
    inviteUser = InviteUserDeskSrc
}

const initialStyle = {
    width: isMobile ? '60px' : '40px',
    height: isMobile ? '60px' : '40px',
    shape: 'circle',
    iconSize: isMobile ? 30 : 20,
    textColor: '#D5E0F2',
    textSize: '12px',
    textStyle: {
        marginTop: '5px'
    }
}
export const defaultUI = {
    accept: {
        basicConfig: {
            ...initialStyle,
            color: '#51C271',
            iconSrc: AcceptSrc
        }
    },
    hangup: {
        basicConfig: {
            ...initialStyle,
            color: '#ED4651',
            iconSrc: HangupSrc
        },
        loadingConfig: {
            ...initialStyle,
            color: '#ED4651',
            loadingWidth: isMobile ? '30px' : '20px',
            loadingHeight: isMobile ? '30px' : '20px'
        }
    },
    reject: {
        basicConfig: {
            ...initialStyle,
            color: '#ED4651',
            iconSrc: HangupSrc
        }
    },
    camera: {
        basicConfig: {
            ...initialStyle,
            color: '#FFFFFF',
            iconSrc: CameraOpenSrc,
            shape: 'circle'
        },
        closedConfig: {
            ...initialStyle,
            color: '#6b758a4d',
            iconSrc: CameraCloseSrc
        },
        loadingConfig: {
            ...initialStyle,
            color: '#6b758a4d',
            loadingWidth: isMobile ? '30px' : '20px',
            loadingHeight: isMobile ? '30px' : '20px'
        }
    },
    microphone: {
        basicConfig: {
            ...initialStyle,
            color: '#FFFFFF',
            iconSrc: MicrophoneOpenSrc
        },
        closedConfig: {
            ...initialStyle,
            color: '#6b758a4d',
            iconSrc: MicrophoneCloseSrc
        }
    },
    speaker: {
        basicConfig: {
            ...initialStyle,
            color: '#FFFFFF',
            iconSrc: SpeakerOpenSrc
        },
        closedConfig: {
            ...initialStyle,
            color: '#6b758a4d',
            iconSrc: SpeakerCloseSrc
        }
    },
    fullScreen: {
        basicConfig: {
            iconSize: 20,
            iconSrc: FullScreenSrc
        }
    },
    minimize: {
        basicConfig: {
            iconSize: isMobile ? 24 : 20,
            iconSrc: minimizeSrc
        }
    },
    switchCamera: {
        basicConfig: {
            iconSize: 28,
            iconSrc: SwitchCameraSrc
        }
    },
    inviteUser: {
        basicConfig: {
            ...initialStyle,
            color: isMobile ? '' : '#6b758a4d',
            width: isMobile ? '24px' : '40px',
            height: isMobile ? '24px' : '40px',
            shape: isMobile ? '' : 'circle',
            iconSize: isMobile ? 24 : 20,
            iconSrc: inviteUser
        }
    },
    toggleButtonPanel: {
        basicConfig: {
            color: 'transparent',
            width: '40px',
            height: '40px',
            shape: 'circle',
            iconSize: 40,
            iconSrc: DownSrc
        }
    }
}
